先用官網裡面的範例

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // a computed getter
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.message.split('').reverse().join('')
    }
  }
})

這個範例，可以說到 Day5 這個生命週期。

• 建立Vue的Instance,建立LifeCycle && events
• injections && reactivity
• 'el'是一個判斷格式，他是第一個被判斷的物件？（不知道能不能這樣稱呼他）
  • 如果沒有，就會去判斷是否有呼叫公用API $
  • 是否有template（這兩個是一定會判斷）
    目前理解到這邊....我們繼續往下走

Computed Caching vs Methods

• 如何調用function

<p>Reversed message: "{{ reverseMessage() }}"</p>
// in component
methods: {
  reverseMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

computed 這兩種方式其實都可以，但在

computed: {
  now: function () {
    return Date.now()
  }
}

這兩個範例，method都會重新渲染，但為什麼要使用computed caching，有時會有大量運算的array。如果不使用，getter將會超過預定次數。

Computed vs Watched Property

<div id="demo">{{ fullName }}</div>

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

這邊有重複的function，可以把它拆到computed裡面

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

Computed Setter

另外一個是如何做Computed的設定？
如果不特別設定都會是 getter-only

// ...
computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
// ...

watcher

不知道該寫什麼以後再補